<template>
    <div style="overflow-y: scroll;overflow-x: hidden;height: 100vh;">
        <div style="width: 90%;margin:20px auto 0;" ref="printContent">
            <div style="overflow: hidden;width: 100%;">
                <el-button type="primary" size="small" style="float: right;" v-print="printObj">打印</el-button>
            </div>
            <div style="width: 100%;margin: 10px auto;" id="printMe">
                <div>
                    <div style="width: 100%;text-align: center;font-size: 24px;font-weight: 700;">委托运营房产情况报表</div>
                    <div style="width: 80%;display: flex;justify-content: space-between;margin: 10px auto;">
                        <div style="font-size: 14px;font-weight: 700;">填报单位：{{ stdwmc }}</div>
                        <div style="font-size: 14px;font-weight: 700;">填报时间：{{ tbyear }}年{{ tbmonth }}月</div>
                    </div>
                </div>
                <el-table :data="bbList" style="width: 100%" :cell-style="{ borderColor: '#000' }"
                    :header-cell-style="{ borderColor: '#000', color: '#000', fontWeight: '700' }" class="exporttable"
                    border>
                    <el-table-column label="序号" align="center" prop="xh" width="40%"></el-table-column>
                    <el-table-column label="基本情况" align="center">
                        <el-table-column label="房产地址" align="center" prop="fwdz"></el-table-column>
                        <el-table-column label="建筑面积（㎡）" align="center" prop="jzmj"></el-table-column>
                    </el-table-column>
                    <el-table-column label="经营情况" align="center">
                        <el-table-column label="出租/招租中" align="center" prop="jyzt" width="50%"></el-table-column>
                        <el-table-column label="租赁方" align="center" prop="zlf" width="60%"></el-table-column>
                        <el-table-column label="租期" align="center" prop="zq" width="50%"></el-table-column>
                        <el-table-column :label="tbyear + '年 合同租金（元）'" align="center" prop="htje"
                            width="70%"></el-table-column>
                        <el-table-column label="收缴租金（元）" align="center">
                            <el-table-column label="本月应收" align="center" prop="byys"></el-table-column>
                            <el-table-column label="截至本月实收租金" align="center" prop="ssje"></el-table-column>
                            <el-table-column label="欠租时间、金额" align="center" prop="qz"></el-table-column>
                        </el-table-column>
                        <el-table-column label="纠纷/诉讼" align="center" prop="jfss" width="50%"></el-table-column>
                    </el-table-column>
                    <el-table-column label="安全使用及巡查情况" align="center">
                        <el-table-column label="房屋拆改" align="center" prop="fwcg" width="50%"></el-table-column>
                        <el-table-column label="房屋附属设施设备" align="center" prop="fwfssb" width="50%"></el-table-column>
                        <el-table-column label="消防设施设备是否满足防火要求" align="center" prop="xfsb"
                            width="60%"></el-table-column>
                        <el-table-column label="本月安全巡查次数" align="center" prop="xccs"></el-table-column>
                    </el-table-column>
                    <el-table-column label="修缮情况" align="center">
                        <el-table-column label="是否修缮" align="center" prop="sfxs" width="50%"></el-table-column>
                        <el-table-column label="修缮费支出（元）" align="center" prop="xsf" width="70%"></el-table-column>
                        <el-table-column label="工程是否完工" align="center" prop="gczt" width="50%"></el-table-column>
                    </el-table-column>
                    <el-table-column label="备注" prop="bz" align="center"></el-table-column>
                </el-table>
                <div style="margin-top: 10px;font-size: 12px;">
                    <div>填表说明：</div>
                    <div>
                        1.“收缴租金”是指截至本月底欠租情况和月租金的收缴情况，如收缴本月租金，在“收缴租金”—“截至本月实收租金”项下填{{ tbyear }}年截至本月底累计实收租金；如有欠租，在“收缴租金”—“欠租时间、金额”项下填写所欠租金的租期和所租金数额。
                    </div>
                    <div>2.“是否涉诉”是指房屋是否存在诉讼情况，如有诉讼，需再在“是否涉诉”项下，填“有”，且需另附情况说明；</div>
                    <div>3.“房屋拆改”是指房产是否存在拆除、改建、扩建和装修改造等情况；“房屋附属设施设备”是指房屋附属设施设备是否存在添加和改造的情况，如选“无”以外选项，需另附情况说明；</div>
                    <div>4.“消防设施设备是否满足防火要求”是指该房屋消防设施设备，在数量、种类、有效性等方面满足防火要求及规范。</div>
                    <div>5.“是否修缮”是指本月是否有房产修缮工程开工；“修缮费支出” 是指本月修缮费用实际支出金额；“工程是否完工”是指本月是否有修缮工程完工的情况。</div>
                    <div>6. 本报表每月30日之间前报送，须加盖填报单位公章。</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import print from 'vue-print-nb'
import { wtbbdetails } from '@/api/index';

export default {
    data: function () {
        return {
            printObj: {
                id: 'printMe',
                popTitle: '委托运营房产情况报表', // 如果不设置 默认是没有值即 undifined
                // ------------------------添加下面代码---------------------------
                // beforeEntryIframe() {
                //     const cells = document.querySelectorAll('.cell')
                //     const tableNode = document.querySelectorAll('.el-table__header,.el-table__body')
                //     // el-table 打印不全的问题
                //     for (let j = 0; j < tableNode.length; j++) {
                //         const tableItem = tableNode[j]
                //         tableItem.style.width = '100%'
                //         const child = tableItem.childNodes
                //         for (let i = 0; i < child.length; i++) {
                //             const element = child[i]
                //             if (element.localName === 'colgroup') {
                //                 element.innerHTML = ''
                //             }
                //         }
                //     }
                //     // el-table 格子里面打印超过格子的问题
                //     for (let i = 0; i < cells.length; i++) {
                //         const cell = cells[i]
                //         cell.style.width = '100%'
                //         cell.removeAttribute('style')
                //     }
                // }
            },
            bbList: [],
            tbyear: '',
            tbmonth: '',
            stdwmc: '',
        };
    },
    directives: {
        print
    },
    methods: {
        wtbbdetails(data) {
            wtbbdetails(data).then(res => {
                this.tbyear = res.data.year
                this.tbmonth = res.data.month
                this.stdwmc = res.data.stdwmc
                this.bbList = res.data.wtbbnr
                this.filetable = res.data.fj
                console.log(res)
            })
        },

    },
    mounted() {
        let data = {
            id: this.$route.query.id
        };
        this.wtbbdetails(data)
    }
};
</script>

<style scoped>
@page {
    size: auto;
    margin: 3mm;
}

.exporttable {
    border: solid 1px #000 !important;
}

.crumbs {
    background-color: #fff;
    padding: 20px 20px;
}

.indexTitle {
    margin-bottom: 20px;
}

.contentbox {
    display: flex;
    justify-content: space-between;
}

.contentsize {
    font-size: 18px;
    font-weight: 700;
    line-height: 32px;
    color: #606266;
}
</style>

<style>
#printMe .el-tabel--mini .el-tabel__cell {
    border: 1px solid red !important;
}

table {
    width: 100%;
    margin: auto;
    text-align: center;
}

.table-1 {
    border: 1px solid #abacae;
    border-collapse: collapse;
    /*合并相邻表格的间距*/

}

.table-1 tr,
.table-1 td {
    font-size: 13px;
    border-collapse: collapse;
    border: 1px solid #abacae;
    padding: 10px;
    box-sizing: border-box;
    color: #606266;
}
</style>